<template>
  <div class="manage">
    <el-dialog
      title="新增"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handelClose">
      <!--新增表单信息 -->
      <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
        <el-form-item label="上级部门" prop="parentId" style="width: 100%">
          <el-cascader
            v-model="form.parentId"
            :show-all-levels="false"
            :options="parentData"
            :props="{ checkStrictly: true , label:'deptName', children: 'depts', emitPath:false, value:'deptId' }"
            clearable>
          </el-cascader>
        </el-form-item>
        <el-form-item label="部门名称" prop="menuName">
          <el-input placeholder="请输入部门名称" v-model="form.deptName"></el-input>
        </el-form-item>
        <el-form-item label="所属单位" prop="menuName">
          <el-input placeholder="请输入所属单位" v-model="form.num"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" prop="orderNum">
          <el-input-number v-model="form.orderNum" controls-position="right" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="部门状态" prop="delFlag">
          <el-radio v-model="form.delFlag" :label="0">正常</el-radio>
          <el-radio v-model="form.delFlag" :label="1">停用</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!--form 搜索区-->
    <el-form :inline="true" :model="form">
      <el-form-item label="部门名称">
        <el-input placeholder="请输入部门名称" v-model="userForm.deptName" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="部门状态">
        <el-select v-model="userForm.delFlag" clearable placeholder="部门状态" size="mini">
          <el-option
            v-for="item in delFlag"
            :key="item.code"
            :label="item.value"
            :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">确 定</el-button>
      </el-form-item>
    </el-form>
    <!--操作区-->
    <div class="manage-header">
      <el-button @click="handelAdd" type="primary" size="mini" plain>
        <i class="el-icon-plus"></i>新增
      </el-button>
      <el-button @click="handelEedit" type="info" size="mini" plain>
        <i class="el-icon-sort"></i>展开/折叠
      </el-button>
    </div>
    <div class="common-table">
      <!--内容-->
      <el-table
        v-if="ifTable"
        :data="tableData"
        stripe
        height="100%"
        style="width: 100%;"
        row-key="deptId"
        :default-expand-all="handelE"
        :tree-props="{children: 'depts'}">
        <el-table-column
          fixed
          prop="deptName"
          label="部门名称"
          sortable
          width="180">
        </el-table-column>
        <el-table-column
          fixed
          prop="num"
          label="单位号"
          width="70">
        </el-table-column>
        <el-table-column
          prop="orderNum"
          sortable
          label="排序">
        </el-table-column>
        <el-table-column prop="" label="状态" width="100">
          <template slot-scope="scope">
            <a @click="updateDelFlag(scope.row)">
              <el-switch
                v-model="scope.row.delFlag==0 ? true : false"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          width="170"
          label="创建时间">
        </el-table-column>
        <el-table-column prop="" label="操作" width="165" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handelEditDept(scope.row)"><i class="el-icon-edit"></i>修改</el-button>
            <el-button type="text" size="mini" @click="handelAddDept(scope.row)"><i class="el-icon-plus"></i>新增</el-button>
            <el-button type="text" size="mini" @click="handelDelDept(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
    import { saveOrUpdateDept , listQueryDeptTree, listDeptTree, delDept} from "../api"
    export default {
        name: "Dept",
        data(){
            return{
                dialogVisible:false,
                form: {
                    deptId: '',
                    parentId: 0,
                    num: '',
                    deptName: '',
                    orderNum: 1,
                    delFlag: 0
                },
                rules:{
                    deptName: [
                        {required: true,message: '部门名称不能为空'}
                    ],
                    num: [
                        {required: true,message: '单位不能为空'}
                    ],
                    orderNum: [
                        {required: true,message: '路径地址不能为空'}
                    ]
                },
                tableData: [],
                parentData: [],
                modelType: 0,  //0：新增，1：修改
                //查询条件
                userForm: {
                    deptName: "",
                    delFlag: ''
                },
                handelE: false,
                ifTable: true,
                delFlag: [
                    {
                        code: 0,
                        value: '正常'
                    },
                    {
                        code: 1,
                        value: '停用'
                    }
                ],
                elIcon: []
            }
        },
        methods:{
            //展开折叠
            handelEedit(){
                this.ifTable=false;
                this.handelE=!this.handelE;
                this.$nextTick(() => {
                    this.ifTable = true
                });
            },
            //提交用户表单
            submit(){
                //进行校验
                this.$refs.form.validate((valid)=>{
                    if (valid){
                        if (this.modelType == 0){
                            //新增
                            this.form.deptId=null;
                            saveOrUpdateDept(this.form).then(({ data })=>{
                                this.$message({
                                    type: data.type,
                                    message: data.message
                                });
                                this.listQueryDeptTree();
                            });
                        }else{
                            //修改
                            const { depts , ...newForm} = this.form;
                            saveOrUpdateDept(newForm).then(({ data }) => {
                                this.$message({
                                    type: data.type,
                                    message: data.message
                                });
                                this.listQueryDeptTree();
                            });
                        }
                        this.handelClose();
                    }
                });
            },
            //弹窗关闭的时候
            handelClose(){
                //重置表单
                this.$refs.form.resetFields();
                this.dialogVisible=false;
            },
            //点击取消
            cancel(){
                this.handelClose();
            },
            //编辑
            handelEditDept(row){
                this.listDeptTree();
                this.modelType=1;
                this.dialogVisible=true;
                //查找出数据,并编辑
                this.editDept(row);
            },
            //查找出数据,并编辑
            editDept(row){
                this.form=JSON.parse(JSON.stringify(row));
            },
            //在字段内新增
            handelAddDept(row){
                this.handelAdd();
                this.form.parentId=row.deptId;
            },
            //修改状态
            updateDelFlag(row){
                this.$confirm('确定要“'+(row.delFlag == 0 ? "停用" : "启用")+'”“'+row.deptName+'吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.delFlag=(row.delFlag == 0 ? 1 : 0);
                    const { depts, ...newRow } = row;
                    //修改
                    saveOrUpdateDept(newRow).then(({ data }) => {
                        this.listQueryDeptTree();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //删除
            handelDelDept(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delDept(row).then(({ data })=>{
                        this.listQueryDeptTree();
                        this.$message({
                            type: data.type,
                            message: data.message
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //新增
            handelAdd(){
                this.form={
                    deptId: '',
                    parentId: 0,
                    num: '',
                    deptName: '',
                    orderNum: 1,
                    delFlag: 0
                };
                this.listDeptTree();
                this.modelType=0;
                this.dialogVisible=true;
            },
            //获取部门列表
            listQueryDeptTree(){
                listQueryDeptTree(this.userForm).then(({data})=>{
                    this.tableData=data;
                });
            },
            listDeptTree(){
                listDeptTree().then(({data})=>{
                    this.parentData=data;
                    /*this.parentData=[{
                        deptId: 0,
                        deptName: '主类目',
                        delFlag: 0,
                        depts: data
                    }];*/
                });
            },
            //条件查询
            onSubmit(){
                this.listQueryDeptTree();
            }
        },
        //页面首次加载时调用的地方
        mounted() {
            this.listQueryDeptTree();
        }
    }
</script>

<style lang="less" scoped>
  .manage{
    height: 90%;
    .manage-header{
      display: flex;
      //justify-content: space-between;
      align-items: center;
    }
    .common-table{
      position: relative;
      //动态计算高度
      height: calc(100% - 62px);
      .pager{
        position: absolute;
        bottom: 0;
        right: 20px;
      }
    }
  }
</style>
